<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>换房</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link href="../../layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
</head>
<body>

<div class="layui-form" id="layuiadmin-app-form-list" lay-filter="layuiadmin-app-form-list"
     style="padding: 20px 30px 0 0;">
    <input id="entityId" type="hidden"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-block">
                <input id="room_name" type="text" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">使用新房价</label>
            <div class="layui-input-block">
                <input type="radio" name="newPrice" lay-filter="newPrice" value="1" title="是" checked>
                <input type="radio" name="newPrice" lay-filter="newPrice" value="0" title="否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原房间房态</label>
            <div class="layui-input-block">
                <input type="radio" name="OldStatus" value="1" title="空房" checked>
                <input type="radio" name="OldStatus" value="4" title="脏房">
                <input type="radio" name="OldStatus" value="5" title="待维修">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择类型</label>
            <div class="layui-input-block">
                <select id="newType" lay-filter="newType" lay-verify="required">

                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择新房间</label>
            <div class="layui-input-block">
                <select id="newRoom" lay-filter="newRoom" lay-verify="required">

                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">原房间价格</label>
            <div class="layui-input-block">
                <input id="oldPrice" type="text" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">新房间价格</label>
                <div class="layui-input-block">
                    <input id="newPrice" type="text" class="layui-input" lay-verify="required|number" readonly/>
                </div>
            </div>
        </div>
        <div id="isPay" style="display: none">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">需补缴</label>
                    <div class="layui-input-block">
                        <input id="overPrice" type="number" value="0" class="layui-input" lay-verify="required|number"
                               readonly/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">支付类型</label>
                <div class="layui-input-inline">
                    <select lay-filter="zhifus" id="zhifus">
                        <option value="0" selected>支付宝</option>
                        <option value="1">现金</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">操作</label>
                <div class="layui-input-inline">
                    <input type="button" onclick="pay()"
                           class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius"
                           style="width: 70px;"
                           value="确认付款">
                    <input type="button" onclick="checkPay()"
                           class="layui-btn  layui-btn-danger layui-btn-xs layui-btn-radius"
                           style="width: 40px;" value="刷新">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">支付状态</label>
                <div class="layui-input-inline">
                    <input type="text" id="payStatus" style="color: #ef5353" class="layui-input" value="待付款" readonly>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide" id="action1">
            <input type="button" lay-submit lay-filter="entity-submit" name="btnSave" data-type="save"
                   id="entity-submit"
                   value="换房">
        </div>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script>
    $("#isPay").hide();

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }


    var OldId = getQueryVariable("id")

    var roomInfo = [];
    var oneRoom = [];
    var overDays = 0;
    //根据父级页面判断，如果是修改，则添加默认值
    //获取所有可用房间信息
    $.ajax({
        url: "/roomRealOrder/toChange",
        type: 'post',
        dataType: 'json',
        async: false,//设置阻断
        data: {"ordernumber": "false", "room_type_id": OldId},
        success: function (data) {
            roomInfo = data.room;
            oneRoom = data.roomInfo;
            overDays = data.overDays;
            $("#room_name").val(oneRoom.name);
            $("#oldPrice").val(oneRoom.price)
            //将下拉框中添加数据
            var modelList = data.roomtype;
            if (modelList && modelList.length != 0) {
                for (var i = 0; i < modelList.length; i++) {
                    if (modelList[i].price >= oneRoom.price) {
                        var option = "<option value=\"" + modelList[i].id + "\"";
                        option += ">" + modelList[i].name + "</option>";  //动态添加数据
                        $("#newType").append(option);
                    }

                }
            }
        }
    });

    function checkPayDIV() {
        var p = $('input[name="newPrice"]').filter(':checked').val();
        if ($("#newPrice").val() == 0) {
            return;
        }
        if (($("#oldPrice").val() == $("#newPrice").val()) || p == 0) {
            $("#isPay").hide();
        }
        //新价格与旧价格不同是触发

        if (($("#oldPrice").val() != $("#newPrice").val()) && p == 1) {
            $("#isPay").show();
            $("#overPrice").val(overDays * ($("#newPrice").val() - $("#oldPrice").val()));
        }
    }

    var orderN = "";

    //点击确认付款
    function pay() {
        orderN = new Date().getMilliseconds() + "Z";
        var zhifus = $("#zhifus").val();
        var overPrice = $("#overPrice").val();
        var renewPrice = newPrice - oldPrice;
        if (renewPrice == 0) return;
        if (zhifus == "0") {
            var payURL = "/desk/pay?payMoney=" + overPrice + "&orderNumber=" + orderN;
            var winObj = window.open(payURL, 'newwindow', 'height=650, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
            $(winObj).on("unload", function () {
                checkPay();
            })
        } else {
            $("#payStatus").val("已付款")
            $("#newType").attr("readonly", "true");
            $("#newRoom").attr("readonly", "true");
        }
    }

    function checkPay() {
        if ($("#zhifus").val() == 1) {
            $("#payStatus").val("已付款")
            $("#newType").attr("readonly", "true");
            $("#newRoom").attr("readonly", "true");
            return;
        }
        var index = layer.load(2, {shade: 0.1}); //0代表加载的风格，支持0-2
        //窗口关闭时到数据库查询该订单是否付款成功
        $.ajax({
            url: "/room_predict_order/payFind",
            type: 'get',
            dataType: 'json',
            timeout: 10000,
            data: {"orderNumber": orderN},
            success: function (data) {
                layer.close(index);
                $("#payStatus").val(data.msg);
            },
            error: function () {
                layer.close(index);
                parent.layer.alert("信息获取失败！");
                return;
            }
        });
    }


    //layui配置
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function () {
            var $ = layui.$
                , form = layui.form;

            form.on("radio(newPrice)", function (data) {
                if (data.value == '0') {
                    $("#isPay").hide();
                } else if (data.value == '1') {
                    checkPayDIV()
                }
            });

            form.on('select(newType)', function (data) {
                var modelList = roomInfo;
                $("#newRoom option").remove();
                if (modelList && modelList.length != 0) {

                    for (var i = 0; i < modelList.length; i++) {
                        if (modelList[i].rtid == data.value) {
                            var option = "<option value=\"" + modelList[i].id + "\"";
                            option += ">" + modelList[i].name + "</option>";  //动态添加数据
                            $("#newRoom").append(option);
                        }
                    }
                    form.render();
                }
            });
            form.on('select(newRoom)', function (data) {
                var modelList = roomInfo;
                if (modelList && modelList.length != 0) {
                    for (var i = 0; i < modelList.length; i++) {
                        if (modelList[i].id == data.value) {
                            $("#newPrice").val(modelList[i].price)
                            checkPayDIV();
                        }
                    }
                }
            });


            //监听提交

            form.on('submit(entity-submit)', function (data) {
                var field = data.field; //获取提交的字段
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                //判断是否需要支付
                if ($("#isPay").is(":visible") && $("#payStatus").val() != "已付款") {
                    layer.msg("请先支付!", {icon: 5});
                    return;
                }

                $.ajax({
                    url: '/roomRealOrder/Change',
                    type: 'post',
                    dataType: 'json',
                    async: false,//设置阻断
                    data: {
                        "oldId": OldId,
                        "newId": $("#newRoom").val(),
                        "room_type_id": $("#newType").val(),
                        "priceFlag": $('input[name="newPrice"]').filter(':checked').val(),
                        "oldStatus": $('input[name="OldStatus"]').filter(':checked').val(),
                        "newPrice": $("#newPrice").val(),
                        "oldPrice": $("#oldPrice").val(),
                        "addPrice": $("#overPrice").val()
                    },
                    success: function (data) {
                        parent.layer.msg(data.msg, {icon: data.icon, zIndex: layer.zIndex + 100});
                    }
                });
                parent.layui.table.reload('entityTable'); //重载表格
                parent.layer.close(index); //再执行关闭
            });
        }
    )
</script>

</body>
</html>